<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>归档</title>
    <link rel="stylesheet" href="../static/dist/semantic/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
</head>

<body  class="Site">
    <!-- 导航 -->
    <section id="home" style="background: url('https://zhuyougu-1315598583.cos.ap-guangzhou.myqcloud.com/blog/202212021944500.png')" >
        <nav class="ui segment attached m-padded-tb-mini m-background-small m-fixed m-top m-height" style="z-index: 2" th:replace="_fragments :: menu(4)">
            <div class="ui secondary stackable menu m-margin-tb-mini">
                <h2 class="ui brown header item m-padded-mini">猪油骨</h2>
                <a href="#" class="right m-item item m-mobile-hide m-padded-tb-small"><svg class="icon1"
                                                                                            aria-hidden="true">
                    <use xlink:href="#icon-shouye"></use>
                </svg>首页</a>
                <a href="#" class="m-item item m-mobile-hide m-padded-tb-small"><svg class="icon1" aria-hidden="true">
                    <use xlink:href="#icon-fenlei1"></use>
                </svg> 分类</a>
                <a href="#" class="m-item item m-mobile-hide  m-padded-tb-small"><svg class="icon1" aria-hidden="true">
                    <use xlink:href="#icon-_biaoqian"></use>
                </svg> 标签</a>
                <a href="#" class="m-item item m-mobile-hide  m-padded-tb-small"><svg class="icon1" aria-hidden="true">
                    <use xlink:href="#icon-guidangrizhi"></use>
                </svg>归档</a>
                <a href="#" class="m-item item m-mobile-hide  m-padded-tb-small"><svg class="icon1" aria-hidden="true">
                    <use xlink:href="#icon-guanyuwomen2"></use>
                </svg>关于我</a>
                <a href="#" class="ui button m-item item m-mobile-hide m-padded-mini"><svg class="icon1"
                                                                                           aria-hidden="true">
                    <use xlink:href="#icon-sousuo1"></use>
                </svg>搜索</a>
            </div>
            <div class="ui modal m-container-mini">
                <i class="close icon"></i>
                <h2 class="ui grey header item ">请输入搜索内容</h2>
                <div class=" ui right icon input">
                    <input type="text" placeholder="搜索....">
                    <i class="search link icon"></i>
                </div>
            </div>
            </div>
            <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"
               style="background: rgba(0,0,0,0)"><i class="sidebar icon"></i></a>
        </nav>
        <div class="inner-width animated zoomIn">
            <div class="content">
                <h2 class="m-weight-none">人生就像蒲公英，看似自由，却身不由己。</h2>
                <h3 class="m-weight-none">要好好珍惜自己的名字：记得自己是谁，便知道自己要做什么，要走什么样的路。</h3>
                <div class="buttons m-margin-tb-tiny disabled">
                    <a href="#container" style="font-size: xx-large">归档</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 中间 -->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <!--header-->

            <div class="ui top attached padded  segment">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <h3 class="ui teal header">归档</h3>
                    </div>
                    <div class="right aligned column">
                        共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${blogCount}"> 144 </h2> 篇博客
                    </div>
                </div>
            </div>
            <th:block  th:each="item : ${archiveMap}">
            <h3 class="ui center aligned header" th:text="${item.key}">2022</h3>
            <div class="ui fluid vertical menu">
                <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item" th:each="blog : ${item.value}">
                    <span>
                        <i class="mini teal circle icon"></i><span th:text="${blog.title}">标题</span>
                        <div class="ui teal basic left pointing label m-padded-mini" th:text="${#dates.format(blog.updateTime,'MMMdd')}">11月13</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-mini" th:text="${blog.flag}">转载</div>
                </a>
            </div>
            </th:block>
        </div>
    </div>
    <br>
    <br>
    <br>

    <!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-tb-small m-position-bottom" th:replace="_fragments :: footer"
            style="background: rgba(241,204,200,0.3)">
        <div class="ui center aligned container">
            <p class="m-text-thin m-text-spaced" style="color: #0a001f">Copyright © 2022 猪油骨</p>
            <a href="http://beian.miit.gov.cn/" target="_blank"
               class="m-text-thin m-text-spaced">桂ICP备2022010618号</a>
        </div>
    </footer>

    <!--/*/<th:block th:replace="_fragments :: script">/*/-->
    <script src="../static/dist/jquery/jquery-3.6.0.min.js"></script>
    <script src="../static/dist/semantic/semantic.min.js" ></script>
    <!--/*/th:block>/*/-->


    <script>
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });
        $(function () {
            $(".ui.button.m-item").on("click", function () {
                $(".ui.modal").modal("show");
            })
        })
        $(document).ready(function () {
            $(window).scroll(function () {
                if (this.scrollY > 20)
                    $(".navbar").addClass("sticky");
                else
                    $(".navbar").removeClass("sticky");
            });

            $('.menu-toggler').click(function () {
                $(this).toggleClass("active");
                $(".navbar-menu").toggleClass("active");
            });
        });
    </script>

</body>

</html>
